import React, { useEffect, useState } from 'react';
import { Progress, Row, Col } from 'antd';
import styles from './index.less';
import apis from '@/services'

interface State {
    proportion: any[]
}

const ProgressList = ({ loading }: { loading: boolean }) => {
    const initState: State = {
        proportion: [{
            name_1: "",
            name_0: "",
            val_0: 0,
            val_1: 0
        },
        {
            name_1: "",
            name_0: "",
            val_0: 0,
            val_1: 1
        },
        {
            name_1: "",
            name_0: "",
            val_0: 1,
            val_1: 1
        }]
    };

    const [proportion, setProportionList] = useState(initState.proportion);

    const getproportion = () => {

        apis.analysis.searchProportion()
            .then((response: any) => {
                const tempResult = response?.result;
                if (response.status === 200) {
                    setProportionList(tempResult)
                }

            });

    };

    useEffect(() => {
        getproportion()
    }, []);

    return (
        <div className={styles.proportionCard}>
            <div className={styles.cardTitle}>
                <div className={styles.height}></div>
                <div style={{marginBottom:'100px'}}>
                    {/* <strong className={styles.titleColor}>|</strong> */}
                    <span className={styles.space}>占比统计</span>
                </div>
                <div>
                    <div className={styles.data}>
                        <div className={styles.firstImg}>
                        </div>
                        <Progress percent={(proportion[0].val_0 / proportion[0].val_1) * 100} status="active" showInfo={false} strokeColor={"#23D194"} />
                    </div>
                    <Row className={styles.datas}>
                        <Col>
                            <span className={styles.titleFont}>{proportion[0].name_0}</span>
                            <span className={styles.titleRight}>{proportion[0].name_1}</span>
                        </Col>
                        <Col className={styles.titleNum}>
                            <span>{proportion[0].val_0}/{proportion[0].val_1}</span>
                        </Col>
                    </Row>
                </div>
                <div className={styles.progress}>

                    <div className={styles.data}>
                        <div className={styles.secondImg}>
                        </div>
                        <Progress percent={(proportion[1].val_0 / proportion[1].val_1) * 100} status="active" showInfo={false} strokeColor={"#FFAC2F"} />
                    </div>
                    <Row className={styles.datas}>
                        <Col>
                            <span className={styles.titleFont}>{proportion[1].name_0}</span>
                            <span className={styles.titleRight}>{proportion[1].name_1}</span>
                        </Col>
                        <Col className={styles.titleNum}>
                            <span>{proportion[1].val_0}/{proportion[1].val_1}</span>
                        </Col>
                    </Row>
                </div>
                <div className={styles.progress}>

                    <div className={styles.data}>
                        <div className={styles.thirdImg}>
                        </div>
                        <Progress percent={(proportion[2].val_0 / proportion[2].val_1) * 100} status="active" showInfo={false} strokeColor={"#FF4141"} />
                    </div>

                    <Row className={styles.datas}>
                        <Col>
                            <span className={styles.titleFont}>{proportion[2].name_0}</span>
                            <span className={styles.titleRight}>{proportion[2].name_1}</span>
                        </Col>
                        <Col className={styles.titleNum}>
                            <span>{proportion[2].val_0}/{proportion[2].val_1}</span>
                        </Col>
                    </Row>
                    <div className={styles.heightBottom}></div>
                </div>
            </div>
        </div>
    );
}
export default ProgressList;

